
<template>
  <div>
    <div style="height:28px;padding:5px">
      <el-row>
        <el-col :span="1">
          <el-button size="mini" @click="popSchBox" icon="el-icon-search">搜索</el-button>
        </el-col>
        <el-col :span="1">
          <JsonExcel :data="rowDataFormat" name="出库.xls">
            <el-button size="mini" icon="el-icon-download">导出</el-button>
          </JsonExcel>
        </el-col>
      </el-row>
      <el-button-group></el-button-group>
    </div>
    <div>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1" />
    </div>
    <div>
      <ag-grid-vue
        ref="grid"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :style="{ height: gridHeight }"
        :pagination="false"
        @grid-ready="onGridReady"
        class="ag-theme-material"
        :enablecolresize="true"
      ></ag-grid-vue>
      <el-pagination
        :total="rowsCount"
        :current-page="currentPage"
        :page-sizes="[50,100,200,500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="currentPageSelect"
      ></el-pagination>
    </div>
    <SaleOutSearchBox @searchBtnClick="listSalesOutReportByDefault" ref="schBox" />
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'
import { listSalesOutReport } from '@/api/salesoutreport'
import SaleOutSearchBox from '@/components/SearchBox/SaleOutSearchBox.vue'
import JsonExcel from 'vue-json-excel'

export default {
  components: {
    AgGridVue,
    SaleOutSearchBox,
    JsonExcel
  },
  data() {
    return {
      columnDefs: [
        { headerName: '单号', field: 'CODE', sortable: true, filter: true },
        { headerName: '日期', field: 'FDATE', sortable: true, filter: true },
        {
          headerName: '产品编码',
          field: 'PRODCODE',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '产品名称',
          field: 'PRODNAME',
          sortable: true,
          filter: true,
          resizable: true
        },
        { headerName: '数量', field: 'QTY', sortable: true, filter: true },
        { headerName: '单位', field: 'UNIT', sortable: true, filter: true },
        {
          headerName: '旧料号',
          field: 'OLDNUMBER',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '承运商',
          field: 'CARRIAGER',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '运单号',
          field: 'FCARRIAGENO',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '单价',
          field: 'PRICE',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '金额',
          field: 'AMOUNT',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '折前单价',
          field: 'FTAXPRICE',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '折扣',
          field: 'DISTCOUNT',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '销售单号',
          field: 'SALESORDER',
          sortable: true,
          filter: true,
          resizable: true
        },
        {
          headerName: '物流地址',
          field: 'FRECEIVEADDRESS',
          sortable: true,
          filter: true,
          resizable: true
        }
      ],
      rowData: null,
      gridHeight: '',
      rowsCount: null,
      currentPage: 1,
      pageSize: 200,
      gridApi: null,
      columnApi: null,
      customerModel: null
    }
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api
      this.columnApi = params.columnApi
    },
    csvExport() {
      const params = {
        skipHeader: false,
        columnGroups: true,
        skipFooters: false,
        skipGroups: false,
        skipPinnedTop: false,
        skipPinnedBottom: false,
        allColumns: true,
        onlySelected: false,
        suppressQuotes: true,
        fileName: '出库导出',
        columnSeparator: ','
      }
      this.gridApi.exportDataAsCsv(params)
    },
    popSchBox() {
      this.$refs.schBox.dialogVisible = true
    },
    currentPageSelect(pageIdx) {
      if (pageIdx !== this.currentPage) {
        this.currentPage = pageIdx
      }
      const start = (pageIdx - 1) * this.pageSize
      const end = start + this.pageSize
      this.listSalesOutReport(start, end, this.getConditions())
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPageSelect(1)
    },
    getConditions() {
      const conditions = []
      if (this.$refs.schBox.form.kwDocDate1) {
        conditions.push({
          Key: 'FDATE',
          Op: '>=',
          Value: this.$refs.schBox.form.kwDocDate1
        })
      }
      if (this.$refs.schBox.form.kwDocDate2) {
        conditions.push({
          Key: 'FDATE',
          Op: '<=',
          Value: this.$refs.schBox.form.kwDocDate2
        })
      }
      conditions.push({
        Key: 'PRODNAME',
        Op: 'LIKE',
        Value: '%' + this.$refs.schBox.form.kwProduction + '%'
      })
      conditions.push({
        Key: 'OLDNUMBER',
        Op: 'LIKE',
        Value: '%' + this.$refs.schBox.form.kwOldNumber
      })
      conditions.push({
        Key: 'CODE',
        Op: 'LIKE',
        Value: '%' + this.$refs.schBox.form.kwOrderCode
      })
      conditions.push({
        Key: 'SALESORDER',
        Op: 'LIKE',
        Value: '%' + this.$refs.schBox.form.kwSalesOrder
      })
      return conditions
    },
    listSalesOutReport(pos, size, conditions) {
      listSalesOutReport(pos, size, conditions)
        .then(response => {
          this.rowData = response.Data
          this.rowsCount = response.Cnt
        })
        .catch(error => {
          console.log(error)
          this.rowData = []
          this.rowsCount = 0
        })
    },
    listSalesOutReportByDefault() {
      this.listSalesOutReport(
        this.currentPage - 1,
        this.pageSize,
        this.getConditions()
      )
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  },
  computed: {
    rowDataFormat: function() {
      let json = []
      if (this.rowData != null) {
        for (let i = 0; i < this.rowData.length; i++) {
          let item = {}
          item.单号 = this.rowData[i].CODE
          item.日期 = this.rowData[i].FDATE
          item.产品编码 = this.rowData[i].PRODCODE
          item.产品名称 = this.rowData[i].PRODNAME
          item.数量 = this.rowData[i].QTY
          item.单位 = this.rowData[i].UNIT
          item.旧料号 = this.rowData[i].OLDNUMBER
          item.单价 = this.rowData[i].PRICE
          item.金额 = this.rowData[i].AMOUNT
          item.折前单价 = this.rowData[i].FTAXPRICEdate
          item.折扣 = this.rowData[i].DISTCOUNT
          item.销售单号 = this.rowData[i].SALESORDER
          item.运单编号 = this.rowData[i].FCARRIAGENO
          item.承运商 = this.rowData[i].CARRIAGER
          item.物流地址 = this.rowData[i].FRECEIVEADDRESS
          json.push(item)
        }
      }
      return json
    }
  },
  mounted() {
    this.gridHeight = window.innerHeight - 30 - 50 - 32 - 5 - 38 - 10 + 'px'
    const that = this
    window.onresize = function changeGridSize() {
      that.gridHeight = window.innerHeight - 30 - 50 - 32 - 5 - 38 - 10 + 'px'
    }
    this.listSalesOutReportByDefault()
  },
  beforeMount() {}
}
</script>

<style lang="scss">
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>

